<template>
  <zh-table
      ref="logTableForWtTaskTable"
      title="我的日志"
      :height="400"
      type="default"
      :columns="state.tableColumn"
      :data="state.tableData"
      :radio-config="{ trigger: 'row' }"
      :disabled="false"
  >
    <template #header_button v-if="props.logOperateFlag">
      <zh-button button-type="add"  @click="addLog()">新建日志</zh-button>
    </template>

    <template #operate_default="{ row }">
      <zh-button link  button-type="edit" @click="editLog(row)">编辑 </zh-button>
      <zh-button link button-type="del" @click="delLog(row)">删除 </zh-button>
    </template>
  </zh-table>

  <zh-dialog
      :title="state.logFormTitle"
      width="30%"
      v-model="state.logFormVisible"
  >
    <template v-slot:footer>
      <el-button @click="cancel"> 关闭 </el-button>
      <el-button type="primary" @click="handleOk"> 保存 </el-button>
    </template>
    <wtTaskLogForm ref="wtTaskLogFormPage" :wtTaskLog="state.selectRow"></wtTaskLogForm>
  </zh-dialog>
</template>

<script lang="ts" setup name="logTableForWtTask">
import wtTaskLogForm from './wtTaskLogForm.vue'
import {reactive, defineProps, onMounted, ref, watch} from "vue";
const logTableForWtTaskTable = ref(null);
const wtTaskLogFormPage = ref(null);
const emit = defineEmits(['refresh']);

const props = defineProps({
  taskId: {
    type: String,
    required: true,
  },
  wtTaskAllocationId: {
    type: String,
    required: true
  },
  //是否具备日志操作权限
  logOperateFlag: {
    type: Boolean,
    required: false,
    default: false
  },
  modelValue: {
    type: Array,
    required: true
  }
});
const state = reactive({
  tableColumn: [
    { type: "seq", width: 80, fixed: "left", align: "center", title: "序号" },
    { field: "workDate", title: "工作日期", align: "center", width: 180 },
    { field: "workContent",title: "工作内容",align: "center"},
    { field: "createTime",title: "创建时间",align: "center", width: 120},
    { field: 'operate', title: '操作', align: 'center', width: 200, slots: { default: 'operate_default' },visible: props.logOperateFlag },
  ],
  logFormTitle: undefined,
  logFormVisible: false,
  wtTaskVO: {
    taskId: undefined,
    wtTaskAllocationId: undefined
  },
  selectRow: undefined,
  tableData: []
})

function addLog() {
  state.logFormTitle = '日志新建';
  state.selectRow = {};
  state.logFormVisible = true;
}

function editLog(row) {
  state.logFormTitle = '日志编辑';
  state.selectRow = row;
  state.logFormVisible = true;
}

function cancel() {
  state.logFormVisible = false;
}

function handleOk() {
  if(state.logFormTitle === '日志新建'){
    //新增
    const params = JSON.parse(JSON.stringify(wtTaskLogFormPage.value.getData()));
    params.taskId = state.wtTaskVO.taskId;
    params.wtTaskAllocationId = state.wtTaskVO.wtTaskAllocationId;
    $api.common.send
        .post('wtTask008', params)
        .then((res) => {
          $messageBox.success('新建成功', '成功提示');
          emit('refresh')
        })
        .catch(() => {});
  }else {
    //编辑
    const params = JSON.parse(JSON.stringify(wtTaskLogFormPage.value.getData()));
    $api.common.send
        .post('wtTask009', params)
        .then((res) => {
          $messageBox.success('编辑成功', '成功提示');
          emit('refresh')
        })
        .catch(() => {});
  }
  state.logFormVisible = false;
}

function delLog(row) {
  $api.common.send
      .post('wtTask010', row)
      .then((res) => {
        $messageBox.success('删除成功', '成功提示');
        emit('refresh')
      })
      .catch(() => {});
}

watch(
    () => props.modelValue,
    () => {
      state.tableData = props.modelValue;
    }
);

onMounted(() => {
  state.tableData = props.modelValue;
  state.wtTaskVO.taskId = props.taskId;
  state.wtTaskVO.wtTaskAllocationId = props.wtTaskAllocationId;
});

defineExpose({
})

</script>

<style scoped>

</style>